<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" type="text/css" href="./Team.css" />
    <link rel="stylesheet" type="text/css" href="./Team_CardPerm.css" />
    <link rel="stylesheet" type="text/css" href="./Team_CardRole.css" />
    <link rel="stylesheet" type="text/css" href="./Team_TagRole.css" />
    <link rel="stylesheet" type="text/css" href="./Team_Header.css" />
    <link rel="stylesheet" type="text/css" href="./Team_Nav.css" />
    <link rel="stylesheet" type="text/css" href="./Team_ModuleForms.css" />
    <link rel="stylesheet" type="text/css" href="./Team_Member.css" />
    <title>团队管理系统</title>
    <link
      rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"
    />
  </head>
  <body>
    <!-- 导航栏 -->
    <div class="navbar">
      <div class="nav-item">对局管理</div>
      <div class="nav-item active">团队管理</div>
      <div class="nav-item">服务器配置</div>
      <div class="nav-item">插件管理</div>
    </div>
    <!-- 头部区域 -->
    <div class="header-container">
      <div class="header">
        <h1 class="header-title">团队管理</h1>
        <p class="header-subtitle">管理团队成员和角色权限设置</p>
      </div>
    </div>

    
    <div class="container">
        <!-- 权限卡片区域 -->
        <div class="card">
          <div class="card-header">
            <div class="card-title">角色设置</div>
            <button class="btn btn-primary" onclick="openPermissionModal()">
              <i class="fas fa-plus"></i> 新建角色
            </button>
          </div>

          <div class="permission-grid">
            <!-- 管理员卡片 -->
            <div class="permission-card">
              <div class="permission-header">
                <div
                  class="color-indicator"
                  style="background-color: #e74c3c"
                ></div>
                <div class="permission-name">管理员</div>
                <div class="permission-actions">
                  <button
                    class="icon-btn"
                    title="编辑"
                    onclick="openEditPermissionModal('管理员')"
                  >
                    <i class="fas fa-edit"></i>
                  </button>
                  <button
                    class="icon-btn"
                    title="删除"
                    onclick="openDeletePermissionModal('管理员')"
                  >
                    <i class="fas fa-trash"></i>
                  </button>
                </div>
              </div>
              <div class="permission-desc">
                拥有所有权限，可以管理系统全部功能
              </div>
              <!-- <div class="permission-features">
                            <div class="feature-title">权限许可：</div>
                            <div class="feature-list">
                                <div class="feature-item">
                                    <i class="fas fa-check"></i> 对局管理
                                </div>
                                <div class="feature-item">
                                    <i class="fas fa-check"></i> 团队管理
                                </div>
                                <div class="feature-item">
                                    <i class="fas fa-check"></i> 服务器配置
                                </div>
                                <div class="feature-item">
                                    <i class="fas fa-check"></i> 数据库管理
                                </div>
                            </div>
                        </div> -->
            </div>

            <!-- 协助者卡片 -->
            <div class="permission-card">
              <div class="permission-header">
                <div
                  class="color-indicator"
                  style="background-color: #3498db"
                ></div>
                <div class="permission-name">协助者</div>
                <div class="permission-actions">
                  <button
                    class="icon-btn"
                    title="编辑"
                    onclick="openEditPermissionModal('协助者')"
                  >
                    <i class="fas fa-edit"></i>
                  </button>
                  <button
                    class="icon-btn"
                    title="删除"
                    onclick="openDeletePermissionModal('协助者')"
                  >
                    <i class="fas fa-trash"></i>
                  </button>
                </div>
              </div>
              <div class="permission-desc">
                拥有部分管理权限，可以编辑内容但不能删除
              </div>
              <!-- <div class="permission-features">
                            <div class="feature-title">权限许可：</div>
                            <div class="feature-list">
                                <div class="feature-item">
                                    <i class="fas fa-check"></i> 对局管理
                                </div>
                                <div class="feature-item">
                                    <i class="fas fa-check"></i> 团队管理
                                </div>
                                <div class="feature-item">
                                    <i class="fas fa-times"></i> 服务器配置
                                </div>
                                <div class="feature-item">
                                    <i class="fas fa-times"></i> 数据库管理
                                </div>
                            </div>
                        </div> -->
            </div>

            <!-- 访客卡片 -->
            <div class="permission-card">
              <div class="permission-header">
                <div
                  class="color-indicator"
                  style="background-color: #2ecc71"
                ></div>
                <div class="permission-name">访客</div>
                <div class="permission-actions">
                  <button
                    class="icon-btn"
                    title="编辑"
                    onclick="openEditPermissionModal('访客')"
                  >
                    <i class="fas fa-edit"></i>
                  </button>
                  <button
                    class="icon-btn"
                    title="删除"
                    onclick="openDeletePermissionModal('访客')"
                  >
                    <i class="fas fa-trash"></i>
                  </button>
                </div>
              </div>
              <div class="permission-desc">
                只能查看内容，不能进行任何修改操作
              </div>
              <!-- <div class="permission-features">
                            <div class="feature-title">权限许可：</div>
                            <div class="feature-list">
                                <div class="feature-item">
                                    <i class="fas fa-eye"></i> 查看对局
                                </div>
                                <div class="feature-item">
                                    <i class="fas fa-eye"></i> 查看团队
                                </div>
                                <div class="feature-item">
                                    <i class="fas fa-times"></i> 服务器配置
                                </div>
                                <div class="feature-item">
                                    <i class="fas fa-times"></i> 数据库管理
                                </div>
                            </div>
                        </div> -->
            </div>
          </div>
        </div>

        <!-- 成员管理卡片 -->
        <div class="card">
          <div class="card-header">
            <div class="card-title">团队成员</div>
            <button class="btn btn-primary" onclick="openMemberModal()">
              <i class="fas fa-plus"></i> 新增成员
            </button>
          </div>

          <div class="member-tags">
            <div
              class="member-tag tag-admin"
              onclick="openEditMemberModal('admin', '管理员')"
            >
              <i class="fas fa-user"></i> admin
            </div>
            <div
              class="member-tag tag-admin"
              onclick="openEditMemberModal('天帝', '管理员')"
            >
              <i class="fas fa-user"></i> 天帝
            </div>
            <div
              class="member-tag tag-assistant"
              onclick="openEditMemberModal('肯尼迪', '协助者')"
            >
              <i class="fas fa-user"></i> 肯尼迪
            </div>
            <div
              class="member-tag tag-visitor"
              onclick="openEditMemberModal('16岁那年打狙击', '访客')"
            >
              <i class="fas fa-user"></i> 16岁那年打狙击
            </div>
            <div
              class="member-tag tag-other"
              onclick="openEditMemberModal('intman', '其他')"
            >
              <i class="fas fa-user"></i> intman
            </div>
            <div
              class="member-tag tag-other"
              onclick="openEditMemberModal('卢本伟', '其他')"
            >
              <i class="fas fa-user"></i> 卢本伟
            </div>
            <div
              class="member-tag tag-other"
              onclick="openEditMemberModal('祁同伟', '其他')"
            >
              <i class="fas fa-user"></i> 祁同伟
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 新建权限角色模态框 -->
    <div class="modal" id="permissionModal">
      <div class="modal-content">
        <div class="modal-header">
          <div class="modal-title">创建权限角色</div>
          <button class="close-btn" onclick="closeModal('permissionModal')">
            &times;
          </button>
        </div>
        <div class="modal-body">
          <div class="form-group">
            <label class="form-label"
              >权限名称 <span style="color: #e74c3c">*</span></label
            >
            <input type="text" class="form-input" placeholder="输入权限名称" />
          </div>

          <div class="form-group">
            <label class="form-label">描述</label>
            <input type="text" class="form-input" placeholder="输入权限描述" />
          </div>

          <div class="form-group">
            <label class="form-label"
              >标记颜色 <span style="color: #e74c3c">*</span></label
            >
            <div class="color-picker">
              <div
                class="color-option selected"
                style="background-color: #e74c3c"
              ></div>
              <div class="color-option" style="background-color: #3498db"></div>
              <div class="color-option" style="background-color: #2ecc71"></div>
              <div class="color-option" style="background-color: #f39c12"></div>
              <div class="color-option" style="background-color: #9b59b6"></div>
            </div>
          </div>

          <!-- <div class="form-group">
                    <label class="form-label">权限许可 <span style="color: #e74c3c;">*</span></label>
                    <div class="permission-checkboxes">
                        <div class="checkbox-group">
                            <input type="checkbox" id="view-game">
                            <label for="view-game">对局管理 - 可查看</label>
                        </div>
                        <div class="checkbox-group">
                            <input type="checkbox" id="manage-game">
                            <label for="manage-game">对局管理 - 可管理</label>
                        </div>
                        <div class="checkbox-group">
                            <input type="checkbox" id="view-team">
                            <label for="view-team">团队管理 - 可查看</label>
                        </div>
                        <div class="checkbox-group">
                            <input type="checkbox" id="manage-team">
                            <label for="manage-team">团队管理 - 可管理</label>
                        </div>
                        <div class="checkbox-group">
                            <input type="checkbox" id="view-server">
                            <label for="view-server">服务器配置 - 可查看</label>
                        </div>
                        <div class="checkbox-group">
                            <input type="checkbox" id="manage-server">
                            <label for="manage-server">服务器配置 - 可管理</label>
                        </div>
                        <div class="checkbox-group">
                            <input type="checkbox" id="view-db">
                            <label for="view-db">数据库管理 - 可查看</label>
                        </div>
                        <div class="checkbox-group">
                            <input type="checkbox" id="manage-db">
                            <label for="manage-db">数据库管理 - 可管理</label>
                        </div>
                    </div>
                </div> -->
        </div>
        <div class="modal-footer">
          <button
            class="modal-btn btn-cancel"
            onclick="closeModal('permissionModal')"
          >
            取消
          </button>
          <button class="modal-btn btn-save" onclick="savePermission()">
            创建
          </button>
        </div>
      </div>
    </div>

    <!-- 编辑权限角色模态框 -->
    <div class="modal" id="editPermissionModal">
      <div class="modal-content">
        <div class="modal-header">
          <div class="modal-title">编辑权限角色</div>
          <button class="close-btn" onclick="closeModal('editPermissionModal')">
            &times;
          </button>
        </div>
        <div class="modal-body">
          <div class="form-group">
            <label class="form-label"
              >权限名称 <span style="color: #e74c3c">*</span></label
            >
            <input
              type="text"
              class="form-input"
              id="edit-permission-name"
              placeholder="输入权限名称"
            />
          </div>

          <div class="form-group">
            <label class="form-label">描述</label>
            <input
              type="text"
              class="form-input"
              id="edit-permission-desc"
              placeholder="输入权限描述"
            />
          </div>

          <div class="form-group">
            <label class="form-label"
              >标记颜色 <span style="color: #e74c3c">*</span></label
            >
            <div class="color-picker">
              <div
                class="color-option selected"
                style="background-color: #e74c3c"
              ></div>
              <div class="color-option" style="background-color: #3498db"></div>
              <div class="color-option" style="background-color: #2ecc71"></div>
              <div class="color-option" style="background-color: #f39c12"></div>
              <div class="color-option" style="background-color: #9b59b6"></div>
            </div>
          </div>

          <div class="form-group">
            <label class="form-label"
              >权限许可 <span style="color: #e74c3c">*</span></label
            >
            <div class="permission-checkboxes">
              <div class="checkbox-group">
                <input type="checkbox" id="edit-view-game" />
                <label for="edit-view-game">对局管理 - 可查看</label>
              </div>
              <div class="checkbox-group">
                <input type="checkbox" id="edit-manage-game" />
                <label for="edit-manage-game">对局管理 - 可管理</label>
              </div>
              <div class="checkbox-group">
                <input type="checkbox" id="edit-view-team" />
                <label for="edit-view-team">团队管理 - 可查看</label>
              </div>
              <div class="checkbox-group">
                <input type="checkbox" id="edit-manage-team" />
                <label for="edit-manage-team">团队管理 - 可管理</label>
              </div>
              <div class="checkbox-group">
                <input type="checkbox" id="edit-view-server" />
                <label for="edit-view-server">服务器配置 - 可查看</label>
              </div>
              <div class="checkbox-group">
                <input type="checkbox" id="edit-manage-server" />
                <label for="edit-manage-server">服务器配置 - 可管理</label>
              </div>
              <div class="checkbox-group">
                <input type="checkbox" id="edit-view-db" />
                <label for="edit-view-db">数据库管理 - 可查看</label>
              </div>
              <div class="checkbox-group">
                <input type="checkbox" id="edit-manage-db" />
                <label for="edit-manage-db">数据库管理 - 可管理</label>
              </div>
            </div>
          </div>
        </div>
        <div class="modal-footer">
          <button
            class="modal-btn btn-cancel"
            onclick="closeModal('editPermissionModal')"
          >
            取消
          </button>
          <button class="modal-btn btn-save" onclick="savePermissionChanges()">
            保存
          </button>
        </div>
      </div>
    </div>

    <!-- 删除权限确认模态框 -->
    <div class="modal" id="deletePermissionModal">
      <div class="modal-content">
        <div class="modal-header">
          <div class="modal-title">删除权限角色</div>
          <button
            class="close-btn"
            onclick="closeModal('deletePermissionModal')"
          >
            &times;
          </button>
        </div>
        <div class="modal-body">
          <p>
            确定要删除权限角色 "<span id="delete-permission-name"></span>"
            吗？此操作不可逆。
          </p>
        </div>
        <div class="modal-footer">
          <button
            class="modal-btn btn-cancel"
            onclick="closeModal('deletePermissionModal')"
          >
            取消
          </button>
          <button
            class="modal-btn btn-save"
            onclick="confirmDeletePermission()"
          >
            确认删除
          </button>
        </div>
      </div>
    </div>

    <!-- 新增成员模态框 -->
    <div class="modal" id="memberModal">
      <div class="modal-content">
        <div class="modal-header">
          <div class="modal-title">添加成员</div>
          <button class="close-btn" onclick="closeModal('memberModal')">
            &times;
          </button>
        </div>
        <div class="modal-body">
          <div class="form-group">
            <label class="form-label"
              >成员名称 <span style="color: #e74c3c">*</span></label
            >
            <input type="text" class="form-input" placeholder="输入成员名称" />
          </div>

          <div class="form-group">
            <label class="form-label"
              >登录账户 <span style="color: #e74c3c">*</span></label
            >
            <input type="text" class="form-input" placeholder="输入登录账户" />
          </div>

          <div class="form-group">
            <label class="form-label"
              >登录密码 <span style="color: #e74c3c">*</span></label
            >
            <input
              type="password"
              class="form-input"
              placeholder="输入登录密码"
            />
          </div>

          <div class="form-group">
            <label class="form-label"
              >权限分组 <span style="color: #e74c3c">*</span></label
            >
            <select class="form-input">
              <option value="">选择权限分组</option>
              <option value="admin">管理员</option>
              <option value="assistant">协助者</option>
              <option value="visitor">访客</option>
            </select>
          </div>
        </div>
        <div class="modal-footer">
          <button
            class="modal-btn btn-cancel"
            onclick="closeModal('memberModal')"
          >
            取消
          </button>
          <button class="modal-btn btn-save" onclick="saveMember()">
            创建
          </button>
        </div>
      </div>
    </div>

    <!-- 编辑成员模态框 -->
    <div class="modal" id="editMemberModal">
      <div class="modal-content">
        <div class="modal-header">
          <div class="modal-title">编辑成员</div>
          <button class="close-btn" onclick="closeModal('editMemberModal')">
            &times;
          </button>
        </div>
        <div class="modal-body">
          <div class="form-group">
            <label class="form-label"
              >成员名称 <span style="color: #e74c3c">*</span></label
            >
            <input
              type="text"
              class="form-input"
              id="edit-member-name"
              placeholder="输入成员名称"
            />
          </div>

          <div class="form-group">
            <label class="form-label"
              >登录账户 <span style="color: #e74c3c">*</span></label
            >
            <input
              type="text"
              class="form-input"
              id="edit-member-account"
              placeholder="输入登录账户"
            />
          </div>

          <div class="form-group">
            <label class="form-label"
              >登录密码 <span style="color: #e74c3c">*</span></label
            >
            <input
              type="password"
              class="form-input"
              id="edit-member-password"
              placeholder="输入登录密码"
            />
          </div>

          <div class="form-group">
            <label class="form-label"
              >权限分组 <span style="color: #e74c3c">*</span></label
            >
            <select class="form-input" id="edit-member-role">
              <option value="">选择权限分组</option>
              <option value="admin">管理员</option>
              <option value="assistant">协助者</option>
              <option value="visitor">访客</option>
            </select>
          </div>
        </div>
        <div class="modal-footer">
          <button class="modal-btn btn-cancel" onclick="deleteMember()">
            删除此用户
          </button>
          <button class="modal-btn btn-save" onclick="saveMemberChanges()">
            保存修改
          </button>
        </div>
      </div>
    </div>

    <script src="./Team.js"></script>
  </body>
</html>
